<template>
	<view>
		<view class="card">
			<view class="card1"><txt-title title="收货地址" /></view>
			<view class="common-list card" v-for="(item, index) in detailsItems" :key="item.id">
				<view class="img-list">
					<view class="img-title">
						<view class="img-title1">{{ item.receiver }}</view>
						<view class="remarks">{{ item.mobile }}</view>

						<u-tag v-if="item.isdefault === 1" size="mini" plain type="warning" :text="item.isdefault === 1 && '默认'"></u-tag>
					</view>
					<view class="img-text">
						<text class="remarks">{{ item.address_full }}</text>
					</view>
				</view>
				<view class="buttons">
					<view class="tag"><u-icon @click="clickEdit(item)" name="edit-pen" size="28"></u-icon></view>
				</view>
			</view>
			<!-- 下拉刷新组件 -->
			<txt-pulldown :flagIn="flag"></txt-pulldown>
			<!-- 新增按钮 -->
			<view class="fooder">
				<view class="buttons"><u-button @click="clickAdd" shape="circle" type="error" text="添加新地址"></u-button></view>
			</view>

			<!-- 收货地址弹窗 -->
			<u-popup :show="editShow" @close="close" closeOnClickOverlay>
				<view>
					<view class="form">
						<u--form labelPosition="left" :model="model1" :rules="rules" ref="form1" labelWidth="auto">
							<u-form-item label="是否默认" prop="userInfo.receiver" borderBottom ref="item1">
								<u-switch v-model="model1.isdefault" @change="change"></u-switch>
							</u-form-item>
							<u-form-item label="收货人" prop="userInfo.receiver" borderBottom ref="item1">
								<u--input v-model="model1.userInfo.receiver" border="none"></u--input>
							</u-form-item>
							<u-form-item label="手机号码" prop="userInfo.mobile" borderBottom ref="item1">
								<u--input v-model="model1.userInfo.mobile" border="none"></u--input>
							</u-form-item>
							<u-form-item :label="model1.userInfo.province ? '所在省' : '请选择收货地址'" prop="userInfo.province_id" borderBottom ref="item1" @click="provinceClick">
								<view @click.stop="provinceClick"><u--input v-model="model1.userInfo.province" border="none" readonly></u--input></view>
								<u-picker
									:loading="model1.show.provinceLoading"
									:show="model1.show.provinceShow"
									:columns="model1.show.provinceArr"
									keyName="name"
									@cancel="cancel('province')"
									@confirm="confirm('province', $event)"
								></u-picker>
							</u-form-item>
						
							<u-form-item v-if="model1.userInfo.province" label="所在市" prop="userInfo.city_id" borderBottom ref="item1" @click="cityClick">
								<view @click.stop="cityClick"><u--input v-model="model1.userInfo.city" border="none" readonly></u--input></view>
								<u-picker
									:loading="model1.show.cityLoading"
									:show="model1.show.cityShow"
									:columns="model1.show.cityArr"
									keyName="name"
									@cancel="cancel('city')"
									@confirm="confirm('city', $event)"
								></u-picker>
							</u-form-item>
						
							<u-form-item v-if="model1.userInfo.city" label="所在区" prop="userInfo.area_id" borderBottom ref="item1" @click="areaClick">
								<view @click.stop="areaClick"><u--input v-model="model1.userInfo.area" border="none" readonly></u--input></view>
								<u-picker
									:loading="model1.show.areaLoading"
									:show="model1.show.areaShow"
									:columns="model1.show.areaArr"
									keyName="name"
									@cancel="cancel('area')"
									@confirm="confirm('area', $event)"
								></u-picker>
							</u-form-item>
						
							<u-form-item v-if="model1.userInfo.area" label="详细地址" prop="userInfo.address" borderBottom ref="item1">
								<u--input v-model="model1.userInfo.address" border="none"></u--input>
							</u-form-item>
						</u--form>
					</view>
		
					<!-- 点击保存按钮 与新增公用一套样式 -->
					<view class="fooder2">
						<view class="buttons"><u-button @click="clickSave" shape="circle" type="error" text="保存"></u-button></view>
					</view>
					<view class="fooder-shi"></view>
				</view>
			</u-popup>
		</view>
		<view class="fooder-shi"></view>
	</view>
</template>

<script>
import { myAddress, myAddressArea, myAddressSave } from '@/common/api.js';
import onReachBottom from '@/common/mixin/onReachBottom.js';
export default {
	mixins: [onReachBottom],
	data() {
		return {
			detailsItems: [],
			editShow: false,
			model1: {
				isdefault: false,
				userInfo: {
					receiver: '',
					mobile: '',
					province_id: '',
					province: '',
					city_id: '',
					city: '',
					area_id: '',
					area: '',
					address: ''
				},
				show: {
					// 省市区显示
					provinceShow: false,
					provinceLoading: false,
					// 省份所有
					provinceArr: [],
					// 省市区显示
					cityShow: false,
					cityLoading: false,
					// 省份所有
					cityArr: [],
					// 区显示
					areaShow: false,
					areaLoading: false,
					// 省份所有
					areaArr: []
				}
			},
			rules: {
				'userInfo.receiver': {
					type: 'string',
					required: true,
					message: '请填写姓名',
					trigger: ['blur', 'change']
				},
				'userInfo.mobile': {
					type: 'string',
					required: true,
					message: '请填写手机号码',
					trigger: ['blur', 'change']
				},
				'userInfo.province_id': {
					type: 'string',
					required: true,
					message: '请填写省',
					trigger: ['blur', 'change']
				},
				'userInfo.city_id': {
					type: 'string',
					required: true,
					message: '请填写市',
					trigger: ['blur', 'change']
				},
				'userInfo.area_id': {
					type: 'string',
					required: true,
					message: '请填写区',
					trigger: ['blur', 'change']
				},
				'userInfo.address': {
					type: 'string',
					required: true,
					message: '请填写详细地址',
					trigger: ['blur', 'change']
				}
			}
		};
	},
	methods: {
		close() {
			this.editShow = false;
		},
		// 点击编辑按钮
		async clickEdit(item) {
			this.editShow = true;
			this.model1.userInfo = { ...item };
			this.model1.isdefault = !!item.isdefault;
		},
		// 点击添加按钮
		async clickAdd() {
			this.clickEdit();
		},
		// 点击省份
		async provinceClick() {
			this.model1.show.provinceLoading = true;
			// 获取省份
			let province = await myAddressArea();
			this.model1.show.provinceArr = [province];
			console.log('this.model1.show.provinceLoading = true;', this.model1.show.provinceArr);
			this.model1.show.provinceShow = true;
			this.model1.show.provinceLoading = false;
		},
		// 点击城市
		async cityClick() {
			this.model1.show.cityLoading = true;
			// 获取省份
			let city = await myAddressArea({ params: { province_id: this.model1.userInfo.province_id } });
			this.model1.show.cityArr = [city];
			console.log('this.model1.show.cityLoading = true;', this.model1.show.cityArr);
			this.model1.show.cityShow = true;
			this.model1.show.cityLoading = false;
		},

		// 点击区
		async areaClick() {
			this.model1.show.areaLoading = true;
			// 获取省份
			let area = await myAddressArea({ params: { province_id: this.model1.userInfo.province_id, city_id: this.model1.userInfo.city_id } });
			this.model1.show.areaArr = [area];
			console.log('this.model1.show.areaLoading = true;', this.model1.show.areaArr);
			this.model1.show.areaShow = true;
			this.model1.show.areaLoading = false;
		},
		// 取消弹窗
		cancel(attr) {
			this.model1.show[attr + 'Show'] = false;
		},
		// 确定弹窗
		confirm(attr, event) {
			this.model1.show[attr + 'Show'] = false;
			let { name, value } = event.value[0];
			this.model1.userInfo[attr] = name;
			this.model1.userInfo[attr + '_id'] = value;
		},
		// 点击保存按钮
		async clickSave() {
			// 保存编辑新增请求
			await myAddressSave({
				id: this.model1.userInfo.id,
				// 省
				province_id: this.model1.userInfo.province_id,
				// 市
				city_id: this.model1.userInfo.city_id,
				// 区
				area_id: this.model1.userInfo.area_id,
				// 详细地址
				address: this.model1.userInfo.address,
				// 电话
				mobile: this.model1.userInfo.mobile,
				// 收货人
				receiver: this.model1.userInfo.receiver,
				// 默认
				isdefault: this.model1.isdefault ? 1 : 0
			});

			this.close();
			// 重置刷新
			this.Reset();
		},
		async reqPaging() {
			let { data, total } = await myAddress({
				params: {
					limit: 7,
					page: this.num
				}
			});
			this.total = total;
			this.detailsItems = [...this.detailsItems, ...data];
		}
	}
};
</script>

<style lang="scss">
.card1 {
	padding: 28rpx;
}

.common-list {
	// width: 100%;
	// height: 159rpx;
	padding: 14rpx 14rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	.img {
		width: 138rpx;
		height: 134rpx;
	}
	.img-list {
		flex: 1;
		display: flex;
		justify-content: space-between;
		flex-direction: column;
		// margin-left: 23rpx;
		.img-title {
			font-size: 32rpx;
			font-weight: 600;
			color: #3b3a3f;
			display: flex;
			align-items: center;
			margin: 14rpx 0;
			.img-title1 {
				margin-right: 8rpx;
			}
			.remarks {
				font-size: 20rpx;
				color: #a1a3a7;
				margin: 0 14rpx;
			}
		}
		.img-text {
			display: flex;
			flex-direction: column;
			.num {
				color: #f77b4b;
			}
			.remarks {
				font-size: 28rpx;
				color: #a1a3a7;
			}
		}
	}
	.buttons {
		width: 180rpx;
		// height: 130rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		flex-direction: column;
		.tag {
			// width: ;
		}
	}
}
.form{
	margin-left: 14rpx;
}
.fooder {
	margin-left: -28rpx;
	padding: 28rpx;
	width: 100%;
	background-color: #fff;
	position: fixed;
	bottom: 0;
	.buttons {
	}
}
.fooder2 {
	padding: 28rpx;
	width: 100%;
	background-color: #fff;
	position: fixed;
	bottom: 0;
	.buttons {
	}
}
.fooder-shi {
	height: 136rpx;
}
</style>
